<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
		<meta name="description"
			content="学掌门Atstudy网校打造国内精品IT职业在线教育平台,提供软件测试基础,自动化测试,接口测试,软考,istqb,python,移动开发,selenium,loadrunner等线上IT学习视频课程,利用在线学习便捷性,结合IT职业发展特点,着重加强IT项目实战技能,结合在线答疑,实时笔记,在线题库及测验,满足IT学习者从零基础起步直至IT高级岗位的技能所需,成就IT职业梦想">
		<meta data-n-head="ssr" name="keywords"
			content="学掌门Atstudy网校,博为峰Atstudy网校,Atstudy网校,软件测试在线学习,IT职业教育,IT在线培训,IT在线学习,it职业培训,软件测试自学,测试测试工具,自动化测试,接口测试,软考,istqb,python,移动开发,selenium,loadrunner,大数据">
		<link rel="icon" href="img/favicon.ico">
		<title>学掌门Atstudy网校 - IT在线学习平台|打造精品IT职业在线教育及实战平台</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<style type="text/css">
			body {
				background-image: url(img/background.jpg);
				background-repeat: no-repeat;
				background-size: cover;
			}

			.col-md-4 {
				background-color: #ffffff;
				margin-top: 60px;
				border-radius: 10px;
				box-shadow: 2px 2px;
				width: 350px;
			}

			.form-signin {
				width: 90%;
				margin: auto;
			}

			.form-signin input {
				margin: 20px 0px;
				height: 40px;
			}

			.form-signin button {
				height: 40px;
			}

			img {
				width: 75%;
			}

			.thumbnail {
				border: 0px;
			}

			p {
				margin-left: 8px;
				margin-bottom: 10px;
			}

			.col-xs-6 {
				margin-bottom: 20px;
			}

			hr {
				margin-top: 30px;
			}

			.footer {
				background-color: #f5f5f5;
				padding: 10px 0px;
				text-align: center;
				font-size: 12px;
				border-radius: 0px 0px 10px 10px;
			}

			.text-muted {
				width: 60px;
			}
		</style>
		<script src="js/jquery-3.6.0.js"></script>
		<script src="js/jquery.validate.js"></script>
		<script src="js/mock.js"></script>
		<script src="js/bootstrap.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#signupForm").validate({
					rules: {
						email: {
							required: true,
							email: true
						},
						password: {
							required: true,
							minlength: 6
						}
					},
					messages: {
						email: "请输入有效的邮箱地址",
						password: {
							required: "请输入密码",
							minlength: "密码长度至少6个字符"
						}
					},
					errorElement: "em",
					errorPlacement: function(error, element) {
						// Add the `help-block` class to the error element
						error.addClass("help-block");

						if (element.prop("type") === "checkbox") {
							error.insertAfter(element.parent("label"));
						} else {
							error.insertAfter(element);
						}
					},
					highlight: function(element, errorClass, validClass) {
						$(element).parents(".form-group").addClass("has-error").removeClass("has-success");
					},
					unhighlight: function(element, errorClass, validClass) {
						$(element).parents(".form-group").addClass("has-success").removeClass("has-error");
					},
					submitHandler: function() {
						const user = {
							email: $('#inputEmail').val(),
							password: $('#inputPassword').val()
						}
						$.ajax({
							url: '/login',
							type: 'post',
							dataType: 'json',
							data: JSON.stringify(user),
							success(data) {
								const r = JSON.parse(data);
								if (r.code == 200) {
									sessionStorage.setItem("nickname", r.result.nickname);
									location.href = "index.html";
								} else {
									$('#loginModal').modal('show');
								}
							}
						})
					}
				});
			});
		</script>
		<script type="text/javascript">
			Mock.mock('/login', 'post', function(options) {
				let body = JSON.parse(options.body);
				let userList = localStorage.getItem("user");
				userList = JSON.parse(userList);
				let rt = userList.find(function(val) {
					return val.email == body.email && val.password == body.password;
				});
				if (rt) {
					return `{
					  "code": 200,
					  "message": "成功!",
					  "result": {
						"nickname": "${rt.nickname}"
					  }
					}`;
				} else {
					return `{
					  "code": 500,
					  "message": "失败!",
					  "result": {
						"nickname": ""
					   }
					}`;
				}
			})
		</script>
	</head>

	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-4 col-md-offset-7">
					<form class="form-signin" id="signupForm">
						<h3 class="text-center">账户密码登录</h3>
						<div class="form-group">
							<input type="email" id="inputEmail" class="form-control" placeholder="请输入邮箱" autofocus
								name="email">
						</div>
						<div class="form-group">
							<input type="password" id="inputPassword" name="password" class="form-control"
								placeholder="请输入密码">
						</div>
						<button class="btn btn-primary btn-block" type="submit">登录</button>
					</form>
					<hr />
					<div class="row">
						<div class="col-xs-6 col-md-3 col-lg-offset-1">
							<a href="#" class="thumbnail">
								<img src="img/wechat.png">
							</a>
							<p class="text-muted">微信登录</p>
						</div>
						<div class="col-xs-6 col-md-3">
							<a href="#" class="thumbnail">
								<img src="img/phone.png">
							</a>
							<p class="text-muted">手机登录</p>
						</div>
						<div class="col-xs-6 col-md-3">
							<a href="#" class="thumbnail">
								<img src="img/qq.png">
							</a>
							<p class="text-muted">QQ登录</p>
						</div>
					</div>
					<div class="row footer">
						<div class="col-md-12">登录即同意《学掌门网校协议》</div>
					</div>
				</div>
			</div>

		</div>
		<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="loginModal">
			<div class="modal-dialog modal-sm" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="gridSystemModalLabel">提示信息</h4>
					</div>
					<div class="modal-body">
						<p class="text-danger">用户名或密码错误</p>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div>
	</body>
</html>
